<template>
  <div style="padding-left:20px;margin-top:15px;">
    <!-- 标题栏 -->
    <el-row style="font-size:22px;font-weight:bold;line-height:60px">
      <el-col><span>字典管理</span></el-col>
    </el-row>

    <!--    查询栏-->
    <el-card style="width:99%;height:70px;font-weight:bold;">
      <el-form :inline="true" style="padding-right:50px;">
        <el-form-item label="字典名称"><el-input placeholder="请输入内容" v-model="searchDict.name" @keydown.enter="loadDict"></el-input></el-form-item>
        <el-form-item label="字典编码" style="width: 270px">
          <el-input placeholder="请输入内容" v-model="searchDict.code" @keydown.enter="loadDict"></el-input>
        </el-form-item>
        <el-form-item style="margin-right:10px;" @click="resetSearch" ><el-button >重置</el-button></el-form-item>
        <el-form-item><el-button type="primary" @click="loadDict">查询</el-button></el-form-item>
      </el-form>
    </el-card>

    <!--    列表栏-->
    <el-card style="width:99%;margin-top:10px;">
      <el-row style="font-size:19px;line-height:60px">
        <el-col :span="22"><span style="position:relative;top:-8px;">字典列表</span></el-col>
        <el-col :span="2">
          <el-button type="primary" style="float:right;position:relative;top:8px;right:10px;" @click="beforeAddDict" >新增字典</el-button>
        </el-col>
      </el-row>
      <el-table :data="dictArr">
        <el-table-column type="index" label="编号" width="150px" align="center"></el-table-column>
        <el-table-column label="字典名称" prop="name" align="center"></el-table-column>
        <el-table-column label="字典编码" prop="code" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="showDictOption(scope.row.id)">{{scope.row.code}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="备注信息" prop="remark" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="350px" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="editDict(scope.row.id)">编辑</el-button>
            <el-button link type="primary" @click="deleteDict(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <!-- 新增字典弹窗 -->
    <el-dialog :title="dialogTitle" style="width:1000px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
      <el-form label-position="top" style="margin:10px;">
        <el-row :gutter="30">
          <el-col>
            <el-form-item label="字典名称"><el-input placeholder="请输入内容" v-model="saveDictForm.name"></el-input></el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="字典编码"><el-input placeholder="请输入内容" v-model="saveDictForm.code"></el-input></el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="备注信息"><el-input placeholder="请输入内容" v-model="saveDictForm.remark"></el-input></el-form-item>
          </el-col>
          </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveDict">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
  import {ElMessage} from "element-plus";
  import qs from "qs";
  import axios from "axios";
import router from "@/router";
  const dialogVisible = ref(false);
  const dialogTitle = ref('新增字典');
  const searchDict = ref({name:'',code:''})
  const resetSearch = ()=>{
    searchDict.value = {};
    loadDict();
  };
  const saveDictForm = ref({name:'',code:'',remark:''});
  const dictArr = ref([]);
  onMounted(()=>{
    loadDict();
  })
  const loadDict = ()=>{
    let data = qs.stringify(searchDict.value);
    axios.get(BASE_URL+"/v1/dict/select?"+data).then((response)=>{
      if(response.data.code ==100){
        dictArr.value = response.data.data;
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  };
  const beforeAddDict = ()=> {
    dialogVisible.value = true;
    dialogTitle.value = "新增字典";
  }
  const saveDict = ()=>{
    let data = qs.stringify(saveDictForm.value);
    axios.post(BASE_URL+"/v1/dict/save",data).then((response)=>{
      if(response.data.code ==100){
        ElMessage.success("字典保存成功！");
        dialogVisible.value = false;
        saveDictForm.value = {};
        loadDict();
      }else{
        ElMessage.error(response.data.msg);
      }
    })

  };
  const handleClose = ()=>{
    if(confirm("确认关闭吗？")){
    dialogVisible.value = false;
    saveDictForm.value = {};
    }
  };
  const editDict = (id) => {
    dialogTitle.value = "编辑字典";
    dialogVisible.value = true;
    axios.get(BASE_URL+"/v1/dict/select?id="+id).then((response)=>{
      if(response.data.code ==100){
        saveDictForm.value = response.data.data[0];
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
  const deleteDict = (id)=>{
    if(confirm("确认删除该字典？")){
      axios.post(BASE_URL+"/v1/dict/delete?id="+id).then((response)=>{
        if(response.data.code ==100){
          ElMessage.success("字典删除成功！");
          loadDict();
        }else{
          ElMessage.error(response.data.msg);
        }
      })
    }
  }
  const showDictOption = (id)=>{
    // router.push("/dictOption?id="+id);
  }

</script>

<style scoped>

</style>